<template>
  <div class="box">
   <!-- 1. 任意方式创建vue3项目下载vue-router正确配置路由
2. 下载任意UI组件库并引入
3. 正确处理所有页面适配不同尺寸的终端
4. 封装顶部搜索框组件，聚焦跳转搜索页面
5. 实现首页组件分类组件，点击对应tab高亮展示并切换商品列表，数据自行mock接口进行调用
6. 实现横向滑动切换Tab
15. 首页添加骨架屏效果
11. 实现首页商品瀑布流排版效果
9. 实现首页页面滚动顶部搜索框组件和分类组件吸顶效果
10. 自定义实现图片懒加载，首页商品实现图片懒加载效果
7. 封装商品卡片组件，在商品列表中使用组件展示
8. 滚动触底加载下一页数据

 -->
      <header class="header" style="position: sticky;">

        <van-skeleton title avatar :row="2" />
        <van-search
  v-model="value" show-action
  placeholder="iphone16"
  @search="onSearch" right-icon="photograph" @click-input="$router.push('/search')">
  <template #action>
    <div @click="onClickButton">搜索</div>
    
  </template>
</van-search>

      </header>
      <main class="main" style="position: sticky;">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <van-tabs v-model:active="active" sticky>
  <van-tab title="推荐" >
<ul>
  <li v-for="item in list" :key="item.id">
<div><img :src="item.image" alt=""></div>
<div>{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
</ul> 
   </van-tab>
  <van-tab title="鞋类"><ul>
  <li v-for="item in list" Lazyload :key="item.id">
<div><img :src="item.image" alt=""></div>
<div>{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
</ul> </van-tab>
  <van-tab title="潮服">
    <ul>
  <li v-for="item in list" :key="item.id">
<div><img :src="item.image" alt=""></div>
<div>{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
</ul> 
  </van-tab>
  <van-tab title="配饰"><ul>
  <li v-for="item in list" :key="item.id">
<div><img :src="item.image" alt=""></div>
<div>{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
</ul> </van-tab>
  <van-tab title="手表">
    <ul>
  <li v-for="item in list" :key="item.id">
<div><img :src="item.image" alt=""></div>
<div>{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
</ul> 
  </van-tab>
  <van-tab title="包袋">
    <ul>
  <li v-for="item in list" Lazyload :key="item.id">
<div><img :src="item.image" alt=""></div>
<div>{{ item.title }}</div>
<div>{{ item.price }}</div>
  </li>
</ul>  </van-tab>
  <van-tab title="分类" title-style="wap-nav">
     </van-tab>
 
</van-tabs>
</van-pull-refresh>
      </main>
    </div> 
</template>

<script setup>
import reqest from '@/tool/request'
import {ref,onMounted} from 'vue'
const loading =ref(true)
const list=ref([])
// pagination, pageNum
const pagination=ref(1)
onMounted (()=>{
  reqest.get('/list',{
    params:{
      pagination:pagination.value,
      pageNum:40
    }
  }).then(res=>{
    if(res.data.code==200){
      list.value=res.data.data
    }
  })
})
</script>

<style lang="scss" scoped>
ul{
  column-count: 2;
  column-gap: 10px;
  li{
    break-inside: avoid;
  }
}
</style>